/*
 * @Date: 2021-01-28 16:33:07
 * @LastEditTime: 2021-01-28 23:07:03
 * @FilePath: \web-practice-repo\practice\two\js\huawei.js
 */

document.getElementById("bottom_btn").addEventListener("click", function () {
    window.scrollTo({
        top: 0,
        behavior:'smooth'
    })
})
//移动ul的函数
function animate(obj, target, callback) {
    obj.timer = setInterval(function () {
        step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            if (callback) {
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}
function animate(obj, target, callback) {
    obj.timer = setInterval(function () {
        step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            if (callback) {
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

window.addEventListener('load', function () {
    var num = 0;
    var banner = document.querySelector('.bg');
    var slide = document.querySelector('.photo_container');
    var dots = document.querySelector('.dots');
    // 首先动态插入轮播点，插入的个数等于slide里的li的个数
    for (var i = 0; i < slide.children.length; i++) {
        var dot = document.createElement("li");
        dot.setAttribute('index', i);//设置index属性，方便后面点击轮播点，拿到对应的索引
        dot.addEventListener('click', function () {
            console.log(this);
            // 点击轮播点后，改变被点击的点的颜色
            // 点击某个轮播点后，将所有点类名设置为空
            for (var i = 0; i < dots.children.length; i++) {
                dots.children[i].className = '';
            }
            // 将被点击的点的类名设置为selected
            this.className = 'selected';
            var index = this.getAttribute('index');
            num = index;
            console.log(index);

            // 取得ul移动的距离，即索引*轮播图的宽度（从0开始），注意这里是向左移动，所以取负的
            var target = -index * banner.offsetWidth;
            animate(slide, target);
        })
        dots.appendChild(dot);
    }
    // 插入完成后，将第一个轮播点设为被选择状态
    dots.children[0].className = 'selected';

    // 将第一个图克隆，粘贴到slide的最后面，这样最后一张图播放到第一张图时才能平滑向后滑
    // 因为是在生成小图标后添加图片，所以自动生成的小图标并不会增多
    var first = slide.children[0].cloneNode(true);
    slide.appendChild(first);

    //设置自动播放,这里的num要配合点击事件的index,保证从被点击的地方继续自动播放
    var Timer = setInterval(function () {
        //到了最后一张的克隆的图片
        if (num == slide.children.length - 1) {
            num = 0;
            slide.style.left = 0;   //设置为第一张图片，然后马上会滑向第二张图片，这样实现无缝连接
        }
        ++num;
        var target = -num * banner.offsetWidth;
        animate(slide, target);
        //改变对应的点
        for (var i = 0; i < dots.children.length; i++) {
            dots.children[i].className = '';
        }
        dots.children.className[num % dots.children.length] = 'selected';
    }, 9600);

    // 鼠标放上停止自动播放
    banner.addEventListener('mouseover', function () {
        clearInterval(Timer);
        Timer = null;
    })

    // 鼠标离开继续播放
    banner.addEventListener('mouseleave', function () {
        Timer = setInterval(function () {
            //到了最后一张的克隆的图片
            if (num == slide.children.length - 1) {
                num = 0;
                slide.style.left = 0;   //设置为第一张图片，然后马上会滑向第二张图片，这样实现无缝连接
            }
            ++num;
            var target = -num * banner.offsetWidth;
            animate(slide, target);
            //改变对应的点
            for (var i = 0; i < dots.children.length; i++) {
                dots.children[i].className = '';
            }
            dots.children[num % dots.children.length].className = 'selected';
        }, 9600);
    })
})